<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>请求百度的jsonp接口</h1>
  <input class="search">
  <ul></ul>
  <script>
    function jsonp_0 (res) {
      console.log(res);
      document.querySelector("ul").innerHTML = "";
      res.s.forEach(item => {
        let liEle = document.createElement("li");
        liEle.innerHTML = item;
        document.querySelector("ul").appendChild(liEle);
      })
    }
    let searchEle = document.querySelector(".search");
    searchEle.oninput = function () {
      console.log(this.value);
      if (this.value !== "") {
        // 发送jsonp请求 数据
        let s = document.createElement("script");
        s.src = `https://suggestion.baidu.com/su?wd=${this.value}&cb=jsonp_0`;
        document.body.appendChild(s);
      } else
        document.querySelector("ul").innerHTML = "";
    }

  </script>
</body>

</html>